<!DOCTYPE html>
<html lang="en" style="font-size: 20px;">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
  <div>text</div>
	<p >
	  由此例可知, (移动端)先touchstart, 再touchend, 最后才click
	</p>
	<p>
	  click事件是可以e.preventDefault()的, 因为cancelable == true
	</p>
	<p>详情见 <a href="https://www.chromestatus.com/features/5093566007214080" target="_blank">https://www.chromestatus.com/features/5093566007214080</a></p>
	<script>
	  document.body.addEventListener('click', function(e){
		  console.error('you click')
			//console.error(e)
		  //e.preventDefault()
		}, false)

	  document.body.addEventListener('touchstart', function(e){
		  console.error('you touchstart, e.preventDefault() Chrome 54+ 会报错, 因为e.cancelable == false, 但在Firefox却是e.cancelable == true的')
			//console.error(e)
		  e.cancelable && e.preventDefault()
		}, false)
	  document.body.addEventListener('touchsmove', function(e){
		  console.error('you touchmove')
		  //e.preventDefault()
		}, false)
	  document.body.addEventListener('touchend', function(e){
		  console.error('you touchend')
		  e.preventDefault()
		}, false)
	  document.body.addEventListener('touchcancel', function(e){
		  console.error('you touchcancel')
		  //e.preventDefault()
		}, false)
	</script>
</body>
</html>
